/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-26 15:16:50
 */
import React, { useEffect, useState } from "react";
import { Affix, Button, Alert, Radio, Select, Input, Space, Row, Col, Empty } from "antd";
import request, { exportFile } from "@/utils/request";
import { CmdbContent, CmdbHeader} from "@/components";
import { Resizable } from 'react-resizable';
import cmdbres from "@/data/cmdbres";
import ModelTree from "./modelTree";
import ModelDetail from "../modelDetail";
import "./index.less";

const ModelGroup = ({ history, match, location }) => {
    const [leftWidth, setLeftWidth] = useState(230);
    const [selectTreeNode, setSelectTreeNode] = useState();

    return (
        <CmdbContent>
            <CmdbHeader title={'模型属性'} />
            <section className="hcp__page">
                <section className="hcp__page__container model-group">
                    <div className="main-views">
                        <Resizable
                            width={leftWidth}
                            axis='x'
                            height={0}
                            minConstraints={[200]}
                            maxConstraints={[400]}
                            handle={React.createElement('span', {
                                className: `react-resizable-handle`,
                                onClick: (e) => {
                                    e.stopPropagation();
                                },
                            })}
                            onResize={(event, { element, size })=> {setLeftWidth(size.width);}}
                            draggableOpts={{ enableUserSelectHack: false }}
                        >
                            <div style={{width: leftWidth, height:'100%', float: 'left', marginRight: 10}}>
                                <ModelTree setSelectTreeNode={setSelectTreeNode} />
                            </div>
                        </Resizable>
                        <div style={{width: `calc(100% - ${leftWidth}px - 10px)`}} className="right-content">
                            {
                                selectTreeNode?.cmModuleId ? 
                                <ModelDetail history={history} modelInfo={selectTreeNode}/>
                                :<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                            }
                        </div>
                    </div>
                </section>
            </section>
        </CmdbContent>
    );
};

export default ModelGroup;
